<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的其他属性</title>

    <style>
        /*设置字体样式*/
        .family{
            /*这里可以同时设置多个字体样式，由于每台电脑所支持的字体都不相同，
            所以它会从左往右匹配字体，直到匹配到所支持的字体*/
            font-family: "宋体,微软雅黑,黑体,楷体";
        }


        /*设置字体粗细*/
        .bold{
            font-weight: bold;
        }

        /*设置字体细体*/
        .lighter{
            font-weight: lighter;
        }

        /*数字设置粗细*/
        .number{
            font-weight: 900;
        }

        /*设置小型大写字母*/
        .variant{
            font-variant: small-caps;
        }

        .font{
            /*这是字体属性的简写，必须按照顺序写(斜体/小型大写字母/粗体/(字体/行高)/字体样式)*/
            font: italic small-caps bold 20px/50px "微软雅黑";
        }

        /*设置字间距*/
        .letter{
            letter-spacing: 10px;
        }

        /*设置词间距，对中文无效*/
        .word{
            word-spacing: 10px;
        }

        /*设置透明度 0-1 取值*/
        .opacity{
            background-color: red;
            opacity: 0.5;
        }

    </style>


</head>
<body>

<div class="family">我是字体族科</div>
<div class="bold">我是设置粗体</div>
<div class="lighter">我是设置细体</div>
<div class="number">我是数字设置字体粗细</div>
<div class="variant">我是这是小写大写字母:hello world</div>

<div class="font">字体简写属性:xiaoming</div>

<div class="letter">设置字间距</div>
<div class="word">设置词间距:I am a boy</div>
<div class="opacity">设置透明度</div>

</body>
</html>